<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script>
        function f1(){
            alert("这是静态绑定");
        }
        function f2(){
            console.log("鼠标按钮按下了");
        }
        function f3(){
            console.log("鼠标移动了");
        }
        function f4(){
            console.log("鼠标移开了");
        }
        function f5(){
            console.log("我来了");
        }
        function f6(){
            console.log("松开了鼠标按钮");
        }
        function f7(){
            console.log("键盘上的某个键被按下,识别所有按妞");
        }
        function f8(){
            console.log("键盘上的某个键被按下,不识别功能键");
        }
        function f9(){
            console.log("键盘上的某个键松开了");
        }
    </script>
</head>
<body>
<button onclick="f1()">静态绑定</button><br>
<!--
    动态绑定:在HTML元素中并未设置事件句柄
        而是在JS代码中对指定的元素绑定一个事件
-->
<a href="javascript:;" id="a1">动态绑定</a>
<div style="width: 100px;height: 100px;background: red;" onmousedown="f2()" onmousemove="f3()" onmouseout="f4()" onmouseover="f5()" onmouseup="f6()"></div>
<input type="text" onkeydown="f7()" onkeypress="f8()" onkeyup="f9()">
<script>
    document.getElementById("a1").ondblclick = function(){
        alert("这是动态绑定");
    }
</script>
</body>
</html>